<template>
  <el-form ref="form" :rules="rules" :model="currentAdmin" label-width="80px" class="demo-form">
    <!--<el-form-item v-if="currentAdmin.userRole==='USER'" label="用户类型" prop="userType">-->
    <!--<el-select v-model="currentAdmin.userType" placeholder="请选择" disabled>-->
    <!--<el-option-->
    <!--v-for="item in userTypes"-->
    <!--:key="item.value"-->
    <!--:label="item.text"-->
    <!--:value="item.value">-->
    <!--</el-option>-->
    <!--</el-select>-->
    <!--</el-form-item>-->
    <!--<el-form-item label="用户角色" prop="departId">-->
    <!--<el-select v-model="currentAdmin.userRole " placeholder="请选择" disabled>-->
    <!--<el-option-->
    <!--v-for="item in UserRoles"-->
    <!--:key="item.value"-->
    <!--:label="item.text"-->
    <!--:value="item.value">-->
    <!--</el-option>-->
    <!--</el-select>-->
    <!--</el-form-item>-->
    <el-row :gutter="10">
      <el-col :span="12">

      </el-col>
      <el-col :span="12">

      </el-col>
    </el-row>
    <el-card class="box-card">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="currentAdmin.username" :disabled="!!currentAdmin.id"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="pwd" v-if="!currentAdmin.id">
        <el-input v-model="currentAdmin.pwd"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="currentAdmin.name"></el-input>
      </el-form-item>

      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="currentAdmin.mobile"></el-input>
      </el-form-item>

      <el-form-item v-if="currentAdmin.userRole==='USER' " label="性别" prop="sex">
        <el-radio v-model="currentAdmin.sex" label="男">男</el-radio>
        <el-radio v-model="currentAdmin.sex" label="女">女</el-radio>
      </el-form-item>
      <el-form-item v-if="currentAdmin.userRole==='USER' " label="出生日期" prop="birth">
        <el-date-picker
          v-model="currentAdmin.birth"
          type="date"
          format="yyyyMMdd"
          value-format="yyyyMMdd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
    </el-card>
    <el-card class="box-card" style="margin-top: 10px;">
      <!--<el-form-item v-if="currentAdmin.userRole==='USER'&& currentAdmin.userType==='Expert'" label="专家编号"-->
                    <!--prop="proNum">-->
        <!--<el-input v-model="currentAdmin.proNum"></el-input>-->
      <!--</el-form-item>-->
      <el-form-item v-if="currentAdmin.userRole==='USER'" label="所属机构" prop="depart.id">
        <el-cascader
          :options="departTree"
          v-model="curDepart"
          :show-all-levels="false"
          :props="departProps"
          change-on-select
          @change="selectDepart">
        </el-cascader>
        <el-button type="primary" v-if="btnVisible" @click="close">确定</el-button>
        <!--<btn-cascader   :options="departTree"-->
                        <!--v-model="curDepart"   :props="departProps"></btn-cascader>-->
      </el-form-item>

      <el-form-item v-if="currentAdmin.userRole==='USER'" label="职务" prop="duty">
        <el-input v-model="currentAdmin.duty"></el-input>
      </el-form-item>
      <!--<el-form-item v-if="currentAdmin.userRole==='USER'" label="数据权限" prop="usData">-->
        <!--<el-select v-model="currentAdmin.usData" placeholder="请选择">-->
          <!--<el-option-->
            <!--v-for="item in DataPermission"-->
            <!--:key="item.value"-->
            <!--:label="item.text"-->
            <!--:value="item.value">-->
          <!--</el-option>-->
        <!--</el-select>-->
      <!--</el-form-item>-->



      <el-form-item v-if="currentAdmin.userRole==='USER' " label="教育程度" prop="education">
        <el-input v-model="currentAdmin.education"></el-input>
      </el-form-item>

      <el-form-item v-if="currentAdmin.userRole==='USER'&& currentAdmin.userType==='Expert' " label="专业类型"
                    prop="proType">
        <el-select v-model="currentAdmin.proType" placeholder="请选择">
          <el-option
            v-for="item in ProTypes"
            :key="item.value"
            :label="item.text"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <!--<el-form-item v-if="currentAdmin.userRole==='USER' " label="专业" prop="profession">-->
        <!--<el-input v-model="currentAdmin.profession"></el-input>-->
      <!--</el-form-item>-->
    </el-card>

    <el-form-item>
      <el-button type="primary" @click="save('form')">保存</el-button>
      <el-button @click="back">返回</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { mapGetters } from "vuex";
import md5 from "js-md5";
import Status from "@/libs/status";
import { checkMobile, uniqueUsername } from "@/libs/checkRules";
import _ from "lodash";
export default {
  props: {
    isClose: Boolean
  },
  created() {
    this.refresh();
  },
  mounted() {
    this.$watch("currentAdmin", val => {
      this.getParentIds();
    });
    this.ProTypes = _.clone(Status.ProTypes);
  },
  computed: {
    ...mapGetters({
      adminInfo: "adminInfo",
      departTree: "departTree",
      currentAdmin: "currentAdmin"
    })
  },
  data() {
    return {
      btnVisible: false,
      curDepart: [],
      rules: {
        username: [
          { required: true, message: "请输入登录用户名", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 15 个字符",
            trigger: "blur"
          },
          { validator: uniqueUsername, trigger: "blur" }
        ],
        pwd: [
          { required: true, message: "请输入初始密码", trigger: "blur" },
          { min: 6, max: 15, message: "长度在6 到 15 个字符", trigger: "blur" }
        ],
        name: [
          { required: true, message: "请输入管理员姓名", trigger: "blur" },
          { min: 1, max: 15, message: "长度在 1 到 15 个字符", trigger: "blur" }
        ],
        mobile: [
          { required: true, message: "请输入管理员手机号", trigger: "blur" },
          { validator: checkMobile, trigger: "blur" }
        ],
        "depart.id": [
          { required: true, message: "请输入选择机构", trigger: "blur" }
        ]
      },
      userTypes: Status.UserTypes,
      DataPermission: Status.DataPermission,
      UserRoles: Status.UserRoles,
      ProTypes: [],
      departProps: {
        label: "departName",
        value: "id",
        children: "children"
      }
    };
  },
  methods: {
    close() {
      this.btnVisible = false;
    },
    getParentIds() {
      this.curDepart = this.currentAdmin.depart.parentIds;
      this.curDepart.push(this.currentAdmin.depart.id);
    },
    selectDepart(value) {
      this.btnVisible = true;
      if (value) {
        this.currentAdmin.depart.id = value[value.length - 1];
      }
      console.log(this.currentAdmin);
    },
    save(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (!this.currentAdmin.id) {
            this.currentAdmin.pwd = md5(this.currentAdmin.pwd);
            this.$store.dispatch("addAdmin", this.currentAdmin).then(ret => {
              this.$notify({
                title: "管理员添加成功",
                type: "success"
              });
              this.back();
            });
          } else {
            this.$store.dispatch("updateAdmin", this.currentAdmin).then(ret => {
              this.$notify({
                title: "管理员保存成功",
                type: "success"
              });
              this.back();
            });
          }
        } else {
          return false;
        }
      });
    },
    back() {
      this.$emit("close");
    },
    refresh() {
      var para = {};
      this.$store.dispatch("getDepartTree", para).then(ret => {});
    }
  },
  components: {}
};
</script>
<style>
</style>
